<template>
  <el-dialog v-el-drag-dialog title="订单信息" width="80%" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose">
    <el-row>
      <!-- 搜索区域 -->
      <el-card style="margin:0 0 20px 0">
        <div slot="header" class="clearfix">
          <label style="font-size: 26px;">请核对订单信息</label>
        </div>
        <el-row :gutter="20">
          <el-col :span="24" class="m-b-20">
            <label style="font-size: 16px;" class="m-r-20">订单号:</label>
            <el-input v-model="order.orderSn" class="show-input" style="width: 300px;" readonly />
          </el-col>
          <el-table
            ref="attrTable"
            v-loading="tableLoading"
            row-key="id"
            :data="order.carts"
            element-loading-text="加载中"
            border
            fit
            highlight-current-row
            show-overflow-tooltip
            default-expand-all
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-row v-for="(item, index) in scope.row.saleAttrValues" :key="'attr_'+index" type="flex" justify="center">
                  <span style="margin-right: 40px;">{{ item.attrName }}:</span>
                  <span>{{ item.attrValue }}</span>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column align="left" label="品牌" width="120">
              <template slot-scope="scope">
                <el-avatar shape="square" fit="fill" :src="getImageSrc(scope.row.image)" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品" prop="title">
              <template slot-scope="scope">
                <label>{{ scope.row.title }}</label>
              </template>
            </el-table-column>
            <el-table-column align="left" label="价格" prop="price" width="65" />
            <el-table-column align="left" label="数量" prop="count" width="65" />
          </el-table>
        </el-row>
        <el-row v-if="order.receiverDetailAddress" :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>收货地址</label>
          </el-col>
          <el-col :span="1.5">
            <el-input v-model="order.receiverDetailAddress" class="show-input" style="width: 100%;" readonly />
          </el-col>
        </el-row>
        <el-row :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>订单总额</label>
          </el-col>
          <el-col :span="1.5">
            <el-input v-model="order.totalAmount" class="show-input" style="width: 100%;" readonly>
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>支付金额</label>
          </el-col>
          <el-col :span="1.5">
            <el-input v-model="order.payAmount" class="show-input" style="width: 100%;" readonly>
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="order.freightAmount > 0" :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>运费金额</label>
          </el-col>
          <el-col :span="1.5">
            <el-input v-model="order.freightAmount" class="show-input" style="width: 100%;" readonly>
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="order.promotionAmount > 0" :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>促销金额</label>
          </el-col>
          <el-col :span="1.5">
            <el-input v-model="order.promotionAmount" class="show-input" style="width: 100%;" readonly>
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="order.integrationAmount > 0" :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>积分抵扣金额</label>
          </el-col>
          <el-col :span="1.5">
            <el-input v-model="order.integrationAmount" class="show-input" style="width: 100%;" readonly>
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row v-if="order.couponAmount > 0" :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="1.5">
            <label>优惠券抵扣金额</label>
          </el-col>
          <el-col :span="1.5">
            <el-input v-model="order.couponAmount" class="show-input" style="width: 100%;" readonly>
              <template slot="append">元</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="m-t-20" type="flex" align="middle">
          <el-col :span="8">
            <label class="m-r-10">订单状态</label>
            <el-link :type="getDictColor('status', order.status)" :underline="false">
              {{ getDictValue('status', order.status) }}
            </el-link>
          </el-col>
          <el-col :span="8">
            <label class="m-r-10">付款人</label>
            <el-input v-model="order.username" class="show-input" style="width: 300px;" readonly />
          </el-col>
          <el-col v-if="order.paymentTime" :span="8">
            <label class="m-r-10">付款时间</label>
            {{ order.paymentTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </el-dialog>
</template>

<script>

import { orderLoad } from '@/api/mall/order/order'

export default {
  name: 'OrderDetailDialog',
  data() {
    return {
      visible: false,
      appendToBody: false,
      order: {
        orderSn: undefined,
        payType: undefined,
        channelCode: undefined,
        totalAmount: 0,
        payAmount: 0,
        freightAmount: 0,
        promotionAmount: 0,
        integrationAmount: 0,
        couponAmount: 0,
        username: undefined,
        carts: [],
        receiverDetailAddress: undefined,
        status: undefined,
        paymentTime: undefined,
        remarks: undefined
      },
      tableLoading: false,
      optionOfStatus: []
    }
  },
  methods: {
    init(id) {
      this.visible = true
      this.$nextTick(() => {
        this.getDictData()
        this.tableLoading = true
        orderLoad({ id: id }).then(response => {
          this.order = this.$api.objectUpdate(this.order, response.param)
          this.hasLoaded = true
          this.tableLoading = false
        }).catch(e => {
          this.tableLoading = false
        })
      })
    },
    getDictData() {
      this.$dictGroup('sys_order_status').then(response => {
        this.optionOfStatus = response
      })
    },
    getImageSrc(value) {
      return this.$api.getImageSrc(value)
    },
    getDictColor(property, value) {
      return this.$api.getDictElement(this.optionOfStatus, value)[2]
    },
    getDictValue(property, value) {
      return this.$api.getDictElement(this.optionOfStatus, value)[1]
    },
    onClose() {
      this.order = {
        orderSn: undefined,
        payType: undefined,
        channelCode: undefined,
        totalAmount: 0,
        payAmount: 0,
        freightAmount: 0,
        promotionAmount: 0,
        integrationAmount: 0,
        couponAmount: 0,
        username: undefined,
        carts: [],
        receiverDetailAddress: undefined,
        status: undefined,
        paymentTime: undefined,
        remarks: undefined
      }
      this.visible = false
    }
  }
}
</script>
